<template>
  <div id="greetingBox">
    <div id="greeting" v-if="greatBoxShow" :class="[greatBoxShow ? 'shown' : '']">{{ greatMessage }}</div>
  </div>
</template>

<script setup>
import store from "../../store/index.js";
import theme from "../../utils/theme/index.js";
import {computed, ref, onMounted} from 'vue';

const greatMessage = ref("");
const greatBoxShow = computed(() => store.state.page.greatBoxShow);

onMounted(() => {
  greatMessage.value = theme.showGreatBox();
  setTimeout(() => {
    theme.hideGreatBox();
  }, 3000);
});
</script>

<style scoped>
</style>
